<!-- pages/index/index.vue -->
<script setup>
	import { computed, ref } from 'vue'
	import feedList from './components/feed-list.vue'
	import doctorList from './components/doctor-list.vue'
	import { feedListApi, doctorListApi } from '@/services/doctor.js'
	import { onLoad } from '@dcloudio/uni-app'

	// 获取安全区域数据
	const { safeAreaInsets } = uni.getSystemInfoSync()

	const feedTabs = ref([
		{
			label: '推荐',
			type: 'recommend',
			current: 1,
			hasMore: true,
			list: [],
			rendered: true,
		},
		{
			label: '关注',
			type: 'like',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false,
		},
		{
			label: '减脂',
			type: 'fatReduction',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false,
		},
		{
			label: '饮食',
			type: 'food',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false,
		},
	])

	// 标签页索引值
	const tabIndex = ref(0)

	// 请求的tab种类
	const feedType = computed(() => feedTabs.value[tabIndex.value].type)
	// 请求的tab数据
	const feedCurrent = computed(() => feedTabs.value[tabIndex.value].current)
	// 每次请求的数据条数
	const feedPageCount = ref(5)

	const onFeedTabChange = ({ index }) => {
		tabIndex.value = index

		if (!feedTabs.value[index].rendered) getFeedList()
		feedTabs.value[index].rendered = true
	}

	async function getFeedList() {
		try {
			let params = {
				type: feedType.value,
				current: feedCurrent.value,
				pageSize: feedPageCount.value,
			}
			const { data, code } = await feedListApi(params)
			//
			if (code !== 10000) return uni.utils.toast('获取知识信息失败')
			// 列表中原有的数据
			data.rows.forEach((li) => {
				li.content = li.content.replace(/<[^>]+>/g, '')
			})
			feedTabs.value[tabIndex.value].list = [
				...feedTabs.value[tabIndex.value].list,
				...data.rows,
			]

			const current = feedTabs.value[tabIndex.value].current
			// 更新列表数据的页码
			feedTabs.value[tabIndex.value].current = current + 1
			// 判断是否有更多数据
			feedTabs.value[tabIndex.value].hasMore =
				current + 1 < data.pageTotal
		} catch (error) {
			console.log(error, 'error')
			//TODO handle the exception
		}
	}

	const doctorItems = ref([])

	// 获取推荐医生列表
	async function getDoctorList() {
		// 医生列表接口
		const { code, data, message } = await doctorListApi()
		//检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 渲染数据
		doctorItems.value = data.rows
	}

	async function scrollToLower() {
		if (feedTabs.value[tabIndex.value].hasMore) getKnowledgeList()
	}

	function likeDoc() {
		getFeedList()
	}

	onLoad(() => {
		getFeedList()
		getDoctorList()
	})
</script>

<template>
	<scroll-page @scrolltolower="scrollToLower">
		<view
			class="index-page"
			:style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
		>
			<!-- 页面导航 -->
			<view
				:style="{ paddingTop: safeAreaInsets.top + 'px' }"
				class="page-navbar"
				>优医</view
			>

			<!-- 搜索栏 -->
			<view class="search-bar">
				<input
					placeholder-class="input-placeholder"
					placeholder="搜一搜: 疾病/症状/医生/健康知识"
					class="input"
					type="text"
				/>
				<view class="icon-search">
					<uni-icons size="22" color="#C3C3C5" type="search" />
				</view>
			</view>

			<!-- 快速入口 -->
			<view class="quick-entry">
				<navigator hover-class="none" class="quick-entry-item">
					<image
						class="quick-entry-icon"
						src="/static/images/quick-entry-1.png"
					/>
					<text class="label">问医生</text>

					<text class="small">按科室查问医生</text>
				</navigator>

				<navigator
					hover-class="none"
					class="quick-entry-item"
					url="/subpkg_consult/quickly/index?type=2"
				>
					<image
						class="quick-entry-icon"
						src="/static/images/quick-entry-2.png"
					/>
					<text class="label">极速问诊</text>

					<text class="small">20s医生极速回复</text>
				</navigator>

				<navigator hover-class="none" class="quick-entry-item">
					<image
						class="quick-entry-icon"
						src="/static/images/quick-entry-3.png"
					/>
					<text class="label">开药门诊</text>

					<text class="small">线上买药更方便</text>
				</navigator>
			</view>

			<!-- 快速查看 -->
			<view class="quick-view">
				<navigator
					hover-class="none"
					class="quick-view-item"
					url="/subpkg_medicine/order_list/index"
				>
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-1.png"
					/>
					<text class="label">药品订单</text>
				</navigator>

				<navigator
					hover-class="none"
					class="quick-view-item"
					url="/subpkg_archive/list/index"
				>
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-2.png"
					/>
					<text class="label">健康档案</text>
				</navigator>

				<navigator hover-class="none" class="quick-view-item">
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-3.png"
					/>
					<text class="label">我的处方</text>
				</navigator>

				<navigator hover-class="none" class="quick-view-item">
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-4.png"
					/>
					<text class="label">疾病查询</text>
				</navigator>
			</view>

			<!-- 广告位 -->
			<view class="banner-placeholder">
				<swiper
					class="uni-swiper"
					indicator-dots
					indicator-color="#ffffff99"
					indicator-active-color="#fff"
					circular
				>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image
								class="banner-image"
								src="/static/images/banner-1.png"
							/>
						</navigator>
					</swiper-item>

					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image
								class="banner-image"
								src="/static/images/banner-1.png"
								mode="aspectFill"
							/>
						</navigator>
					</swiper-item>
				</swiper>
			</view>

			<!-- 标签页列表 -->
			<view class="doctor-feeds">
				<custom-sticky :offset-top="safeAreaInsets.top + 'px'">
					<custom-tabs
						@click="onFeedTabChange"
						:list="feedTabs"
					></custom-tabs>
				</custom-sticky>

				<!-- 关注知识列表 -->
				<view
					v-for="(feed, index) in feedTabs"
					:key="feed.type"
					v-show="tabIndex === index"
				>
					<doctor-list
						:list="doctorItems"
						v-show="feedType === 'recommend'"
					>
					</doctor-list>
					<feed-list
						:list="feed.list"
						v-if="feed.rendered"
						@likeDoc="likeDoc"
					></feed-list>
				</view>
			</view>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
